<template>
  <h2>姓名:{{ name }}</h2>
  <h2>年龄:{{ age }}</h2>
  <h2>职位:{{ job.type }}</h2>
  <h2>薪水:{{ job.salary }}</h2>
  <button @click="changeInfo">更改信息</button>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'App',
  setup() {
    let name = ref('张三')
    let age = ref(18)
    // 对象绑定
    let job = ref({
      salary: '13K',
      type: '前端工程师',
    })

    function changeInfo() {
      console.log('name===>', name)
      name.value = '李四'
      age.value = '20'
      job.value.salary = '30K'
      job.value.type = 'UI工程师'
    }

    return {
      name,
      age,
      changeInfo,
      job,
    }
  },
}
</script>
